<template>
	<view class="custombox">
		<view class="custopboox">
			<view class="custoptitle">
				<view class="left_title">客户数据概览</view>
				<image
					@click="getData"
					src="https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/images/17338255135827anu1rOPPqxW5f4038e4c5f70b8eb19fa966b79300fe.png"
				></image>
			</view>
			<view class="chartsbox">
				<view class="charttitle">访问数据</view>
				<view class="chartsboxitem">
					<echarts type="line" :opts="opts" :chartData="chartsDataColumn1" />
				</view>
			</view>
			<view class="cardcont bgcolor">
				<view class="titlecard textcolor">交易人数</view>
				<view class="numcard textcolor">{{ dataInfo.tradeAmount }}</view>
				<!-- <view class="timecard textcolor">最后订单时间：{{dataInfo.tradeTime}}</view> -->
			</view>
			<view class="cardcont">
				<view class="titlecard">交易额</view>
				<view class="numcard">￥{{ dataInfo.tradePrice }}</view>
				<!-- <view class="timecard">+12%</view> -->
			</view>
			<view class="cardcont">
				<view class="titlecard">平均订单金额</view>
				<view class="numcard">￥{{ dataInfo.agePrice }}</view>
				<!-- <view class="timecard">+12%</view> -->
			</view>
		</view>
		<view class="kehulybox">
			<view class="lytopbox">
				<view class="tytleft">客户来源</view>
				<view class="tytright">
					<view :class="{ btn1: true, btn2: isWeek == 'm' }" @click="monthweek('m')">按月</view>
					<view :class="{ btn1: true, btn2: isWeek == 'w' }" @click="monthweek('w')">按周</view>
				</view>
			</view>
			<view class="contbox">
				<view class="lefttext">机构家长</view>
				<view class="righttext">{{ jgjzNum }}</view>
			</view>
			<view class="jindut">
				<view class="line1" :style="{ width: jgjzbaifen + '%' }"></view>
			</view>
			<view class="contbox" style="margin-top: 20rpx">
				<view class="lefttext">转介绍</view>
				<view class="righttext">{{ zjNum }}</view>
			</view>
			<view class="jindut">
				<view class="line1 line2" :style="{ width: zjbaifen + '%' }"></view>
			</view>
		</view>
		<view class="kehulybox">
			<view class="custoptitle custopline">
				<view class="left_title">潜在顾客</view>
				<image
					@click="getPotential"
					src="https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/images/17338255135827anu1rOPPqxW5f4038e4c5f70b8eb19fa966b79300fe.png"
				></image>
			</view>
			<view class="qianzaiitem" v-for="(t, idx) in dataList" :key="idx">
				<image mode="aspectFill" :src="t.headPic"></image>
				<view class="qzright">
					<view class="qzrtop">
						<view class="title">{{ t.nickName }}</view>
						<view :class="{ isinters: true, nointers: t.type == 1 }">{{ t.type == 1 ? '不感兴趣' : '感兴趣' }}</view>
					</view>
					<view class="textstyle">
						<text style="color: #f95513">查看：{{ t.viewAmount }}次</text>
						· 停留时长{{ t.remainTime }}
					</view>
					<view class="textstyle">上次访问时间：{{ t.nextTime }}</view>
					<view class="textstyle">感兴趣研学: {{ t.goodsName }}</view>
					<view class="gjbox" v-if="t.type == 0">建议跟进</view>
				</view>
			</view>
			<view v-if="dataList.length == 0" style="width: 100%; margin-top: 30rpx; text-align: center">暂无数据</view>
		</view>
	</view>
</template>

<script>
import { customStat, getPotentialCustomers } from '@/api/yanxue/user.js'
import echarts from '../components/qiun-data-charts/qiun-data-charts.vue'
export default {
	components: {
		echarts
	},
	data() {
		return {
			dataInfo: {},
			isWeek: 'm',
			jgjzNum: 0,
			zjNum: 0,
			jgjzbaifen: 0,
			zjbaifen: 0,
			dataList: [],
			chartsDataColumn1: {},
			opts: { legend: { show: false }, color: ['#f8652a'] }
		}
	},
	created() {
		this.getData()
		this.getPotential()
	},
	methods: {
		getData() {
			customStat().then(res => {
				this.dataInfo = res.result
				let list1 = []
				let list2 = []
				res.result.detailList.map(x => {
					list1.push(x.dayValue.substring(5, 10))
					list2.push(x.visitorAmount)
				})
				this.chartsDataColumn1 = {
					categories: list1,
					series: [
						{
							name: '',
							data: list2
						}
					]
				}
				this.monthweek('m')
			})
		},
		getPotential() {
			getPotentialCustomers({
				page: 1,
				rows: 999
			}).then(res => {
				this.dataList = res.result.list
			})
		},
		monthweek(type) {
			this.isWeek = type
			if (type == 'm') {
				this.jgjzNum = this.dataInfo.userMonthAmount
				this.zjNum = this.dataInfo.introduceMonthAmount
			} else {
				this.jgjzNum = this.dataInfo.userWeekAmount
				this.zjNum = this.dataInfo.introduceWeekAmount
			}
			let total = this.jgjzNum + this.zjNum
			if (total == 0) {
				this.jgjzbaifen = 0
				this.zjbaifen = 0
				return
			}
			let jgbai = (this.jgjzNum / total).toFixed(2)
			this.jgjzbaifen = jgbai * 100
			this.zjbaifen = (1 - jgbai) * 100
		}
	}
}
</script>

<style scoped lang="scss">
.custombox {
	width: 750rpx;
	// height: 100vh;
	// overflow: scroll;
	// padding: 50rpx 32rpx;
}
.custopboox {
	width: 686rpx;
	// height: 1378rpx;
	background: #ffffff;
	border-radius: 20rpx;
	margin: 64rpx 32rpx 30rpx;
	padding: 40rpx 30rpx;

	.chartsbox {
		width: 622rpx;
		height: 570rpx;
		background: #ffffff;
		border-radius: 48rpx;
		border: 4px solid #eeeff2;
		margin-top: 70rpx;

		.charttitle {
			// width: 112rpx;
			font-family: HarmonyOS Sans SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #111827;
			padding: 40rpx 32rpx;
		}

		.chartsboxitem {
			position: relative;
			width: 100%;
			height: 420rpx;
		}
	}

	.cardcont {
		width: 622rpx;
		// height: 174rpx;
		background: #fff;
		border-radius: 20rpx;
		margin: 25rpx 0;
		padding: 24rpx;
		border: 4px solid #eeeff2;

		.titlecard {
			font-family: HarmonyOS Sans SC;
			font-weight: 500;
			font-size: 20rpx;
			color: #718096;
			margin-bottom: 16rpx;
		}

		.numcard {
			font-family: HarmonyOS Sans SC;
			font-weight: 500;
			font-size: 36rpx;
			color: #111827;
		}

		.timecard {
			font-family: HarmonyOS Sans SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #fd6a6a;
			margin-top: 14rpx;
			// line-height: 32rpx;
		}
	}

	.bgcolor {
		background: #f95513;
		border: none;

		.textcolor {
			color: #fff;
		}
	}
}

.kehulybox {
	width: 686rpx;
	min-height: 200rpx;
	background: #ffffff;
	border-radius: 20rpx;
	padding: 44rpx 32rpx;
	margin: 30rpx 32rpx;

	.lytopbox {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.tytleft {
			font-family: HarmonyOS Sans SC;
			font-weight: 500;
			font-size: 40rpx;
			color: #111827;
		}

		.tytright {
			width: 196rpx;
			height: 64rpx;
			background: #f9fafb;
			border-radius: 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 3rpx;

			.btn1 {
				width: 96rpx;
				height: 56rpx;
				border-radius: 28rpx;
				line-height: 56rpx;
				text-align: center;
				background: #f9fafb;
				color: #718096;
				border-radius: 28rpx;
			}

			.btn2 {
				background: #ffffff;
				color: #f95513;
				box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(17, 24, 39, 0.04);
			}
		}
	}

	.contbox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 60rpx;

		.lefttext {
			font-family: HarmonyOS Sans SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #111827;
		}

		.righttext {
			font-family: HarmonyOS Sans SC;
			font-weight: 500;
			font-size: 25rpx;
			color: #718096;
		}
	}

	.jindut {
		width: 100%;
		height: 16rpx;
		background: #f9fafb;
		border-radius: 8rpx;
		margin: 18rpx 0 26rpx;

		.line1 {
			height: 16rpx;
			background: #f95513;
			border-radius: 8rpx;
		}

		.line2 {
			background: #a2ff00;
		}
	}
}

.custoptitle {
	display: flex;
	justify-content: space-between;
	align-items: center;

	.left_title {
		font-family: HarmonyOS Sans SC;
		font-weight: 500;
		font-size: 36rpx;
		color: #111827;
		line-height: 54rpx;
	}

	image {
		width: 40rpx;
		height: 40rpx;
	}
}

.custopline {
	padding-bottom: 60rpx;
	border-bottom: 4px solid #f1f2f4;
}

.qianzaiitem {
	display: flex;
	padding: 36rpx 0rpx;
	border-bottom: 4px solid #f1f2f4;

	image {
		width: 128rpx;
		height: 128rpx;
		border-radius: 64rpx;
	}

	.qzright {
		flex: 1;
		margin-left: 30rpx;
		position: relative;

		.qzrtop {
			height: 42rpx;
			overflow: hidden;

			.title {
				float: left;
				font-family: HarmonyOS Sans SC;
				font-weight: 500;
				font-size: 28rpx;
				line-height: 40rpx;
				color: #111827;
				margin-right: 14rpx;
			}

			.isinters {
				float: left;
				padding: 0 12rpx;
				height: 33rpx;
				border-radius: 16rpx;
				border: 4rpx solid #f95513;
				font-family: HarmonyOS Sans SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #f95513;
				line-height: 33rpx;
				text-align: center;
				box-sizing: content-box;
			}

			.nointers {
				color: #718096;
				border: 4rpx solid #718096;
			}
		}

		.textstyle {
			font-family: HarmonyOS Sans SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #718096;
			margin: 32rpx 0;
		}

		.gjbox {
			position: absolute;
			bottom: 25rpx;
			right: 0;
			width: 138rpx;
			height: 48rpx;
			background: #f95513;
			border-radius: 24rpx;
			font-family: HarmonyOS Sans SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #ffffff;
			line-height: 48rpx;
			text-align: center;
		}
	}
}
</style>
